<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0">

    <link rel="stylesheet" href="{{ url_for('static',filename='css/order.css') }}">
    <link rel="shortcut icon" href="{{ url_for('static', filename='images/hhorder.png') }}">


    <title>订单管理</title>

</head>

<body>

    <div id="app">
        <van-nav-bar fixed z-index="10000" title="订单管理" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>

        <div class="default-height"></div>

        <van-swipe-cell :right-width="65" v-for="item in nowlist" :key="item" :on-close="onClose">

            <div slot="right">
                <span v-cloak class="remove-order">删除</span>
            </div>

            <van-cell-group>
                <van-cell :title="item.user_name">
                    <template slot="title">
                        <span class="van-cell-text">{{item.user_name}}</span>
                        <van-tag plain type="success">{{item.depart_name}}</van-tag>
                        <span class="van-cell-text">{{item.time_desc}}</span>
                    </template>
                </van-cell>
            </van-cell-group>

        </van-swipe-cell>

    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vant/lib/index.css">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


<script>
    var dataList = {{ ordered|tojson }};

    $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};

    var app = new Vue({
      el: '#app',
       data() {
        return {
            nowlist: dataList,
            loading: false,
            finished: true,
        };
        },
      methods: {
          onClickLeft() {
              window.history.back();
          },
          onClose(clickPosition, instance) {
              switch (clickPosition) {
                    case 'left':
                    case 'cell':
                    case 'outside':
                      instance.close();
                      break;
                    case 'right':
                      vant.Dialog.confirm({
                        message: '确定删除吗？'
                      }).then(() => {
                          idx = (instance._uid -3 ) / 4;
                          app.onRemove(idx);

                          // 删除
                          instance.close();

                      }).catch(() => {

                      });
                      break;
                  }
          },
          onRemove(idx) {
              axios.get($SCRIPT_ROOT + '/removeOrder/', {
                  params: {
                      id: app.nowlist[idx]['id']
                    }
              }).then(function (response) {
                  if (response.data['status'] == 200) {
                      window.location.href = $SCRIPT_ROOT + '/orderManage/';
                      vant.Toast("移除成功")
                  } else {
                      vant.Toast(response.data['errorTip'])
                  }
              });
          }
      }
    })

</script>

</html>